import React from 'react';
import {connect} from 'react-redux';
import { ajax } from 'utils/index';
import {getData} from '../../../../actions/component';
import { Row, Col } from 'qnui/lib/grid';
class CountdownItemsV1Preview extends React.Component {
	constructor(props) {
		  super(props);
		  this.loadPromItems(props.dataSource);
		
	}
	countdown_prom_id=0;
	componentWillReceiveProps(nextProps){
		this.loadPromItems(nextProps.dataSource);
	}
	loadPromItems(data){
		let countdown_prom_id=0;
		data.map(comp=>{
			if( comp.code && comp.code.indexOf("countdown_prom")>=0){
				// 查找倒计时折扣ID
				countdown_prom_id=comp.formData.countdownId;
			}
		});
			
		if(this.countdown_prom_id!=countdown_prom_id){
			this.props.dispatch(
				getData(
					{
						api:'getTagTaskItems',
						data_id:this.props.dataId,
						params:{data_format:"form_data",prom_id:countdown_prom_id}
					}
				)
			);
			this.countdown_prom_id=countdown_prom_id;
		}
	}
	findCard(id) {
		let cards = this.props.dataSource;
		const card = cards.filter(c => c.id === id)[0];
		return {
		  card,
		  index: cards.indexOf(card)
		};
	}
	style = {position:"absolute",
			  boxSizing:"border-box",
			  fontSize:"37px",
			  left:"188px",
			  top:"100px",
			  color:"#333333"};
	itembox_style={
		    borderRadius:"10px",
			overflow: "hidden",
			width:"150px",
			float:"left",
			backgroundColor:"#FFFFFF",
			marginLeft:"6px",
			marginTop:"5px",
			textAlign:"left",
			fontFamily:"Microsoft YaHei",
	}
	render() {
		let items = this.props.component.data[this.props.dataId];
		let more = "";
		let {card} = this.findCard(this.props.dataId);

		if(typeof(items) == 'undefined'){
			items = [];
			more=
			<div style={{color:"#FFF"}}>请在倒计时组件中选择倒计时折扣</div>;
		}else{
			more = 
			<div style={{color:"#FFF"}}>更多商品请在预览中查看</div>;
		}
		return (
		   <div style={{position:"relative",textAlign:"center",backgroundColor:card.formData.bgColor}}>
			<Row type="wrap" style={{padding:"0"}}>
			   {
				   items.map((item,key)=>{
					   return(
							<div key={key} style={this.itembox_style}>
								<div style={{height:"160px",overflow:"hidden"}}>
									<img src={item.pic_url}  style={{width:"160px"}}/>
								</div>
								<div style={{paddingLeft:"5px",height:"40px"}}>{item.title.substring(0,20)}</div>
								<div style={{paddingLeft:"5px"}}>
									<span style={{fontSize:"12px",color:"rgb(255, 85, 0)"}}>￥</span>
									<span style={{fontSize:"20px",color:"rgb(255, 85, 0)"}}>{item.final_price}</span>
									<span style={{fontSize:"12px",color:"rgb(153, 153, 153)",textDecoration:"line-through"}}>￥{item.price}</span>
										{/*<span style={{fontSize:"12px",color:"rgb(255, 85, 0)"}}>只剩x分钟</span>*/}
								</div>
								
							</div>
						)
					})
			   }
			</Row>
			{more}
		   </div>
		);
	}
}
CountdownItemsV1Preview.defaultProps = {
};
function mapStateToProps(state){
  return {
    dataSource:state.todoMVCReducer,
	component:state.component
  }
};
export default connect(mapStateToProps)(CountdownItemsV1Preview);

//https://segmentfault.com/q/1010000008860005  提问
